<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/16
  Time: 12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>

<div class="layui-form" id="searchForm" lay-filter="searchForm">
    <div class="layui-inline">
        <label class="layui-form-label">标题:</label>
        <div class="layui-input-inline">
            <input type="text" name="noticetitle" placeholder="标题关键字" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">内容:</label>
        <div class="layui-input-inline">
            <input type="text" name="noticetext" placeholder="内容关键字" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">小区名:</label>
        <div class="layui-input-block">
            <select name="plotid" id="plot">
                <option value="0">请选择小区</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">发布状态:</label>
        <div class="layui-input-block">
            <select name="notice" id="notice">
                <option value="-1">请选择</option>
                <option value="0">草稿</option>
                <option value="1">发布</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn" onclick="search()" >查询</button>
    </div>
    <div class="layui-inline">
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>








<div id="add" style="display:none;padding:20px">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">标题:</label>
            <div class="layui-input-block">
                <input type="text" name="noticetitle" placeholder="标题" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容:</label>
            <div class="layui-input-block">
                <textarea name="noticetext" placeholder="内容" required  class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型:</label>
            <div class="layui-input-block">
                    <input type="radio" name="notice" value="0" title="草稿" checked>
                    <input type="radio" name="notice" value="1" title="发布">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="noticeimg"/>
            <label class="layui-form-label">图片:</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn1">
                    <i class="layui-icon layui-icon-upload"></i> 单图片上传
                </button>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img1" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text1"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布时间:</label>
            <div class="layui-input-block">
                <input type="text" name="time" id="datetimes"  class="layui-input" value="">
                <input type="hidden" name="createtime" id="datetime"  class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotid">
                    <option value="0">请选择小区</option>
                </select>
            </div>
        </div>
    </form>
</div>
<div  id="upload" style="display:none;padding:20px">
    <form class="layui-form" id="uploadimgForm" lay-filter="upload">
        <div class="layui-form-item">
            <label class="layui-form-label">标题:</label>
            <div class="layui-input-block">
                <input type="text" name="noticetitle" placeholder="标题" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容:</label>
            <div class="layui-input-block">
                <textarea name="noticetext" placeholder="内容" required  class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型:</label>
            <div class="layui-input-block">
                <input type="radio" name="notice" value="0" title="草稿" checked>
                <input type="radio" name="notice" value="1" title="发布">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图 片:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id"/>
                <input type="hidden" name="noticeimg"/>
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i> 单图片上传
                </button>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布时间:</label>
            <div class="layui-input-block">
                <input type="hidden" name="time" id="time"  class="layui-input" value="">
                <input type="text" name="createtime" id="times"  class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotids">
                    <option value="0">请选择小区</option>
                </select>
            </div>
        </div>
    </form>
</div>
<table id="noticeTable" lay-filter="noticeTables"  class="layui-table layui-table-hover"></table>
<%--头部工具栏，添加--%>
<script type="text/html" id="headTool">
    <button class="layui-btn" onclick="add()">添加通知</button>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="uploads">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </div>
</script>
<script>
    function today(){//构建方法
        var today=new Date();//new 出当前时间
        var h=today.getFullYear();//获取年
        var m=today.getMonth()+1;//获取月
        var d=today.getDate();//获取日
        var H = today.getHours();//获取时
        var M = today.getMinutes();//获取分
        var S = today.getSeconds();//获取秒
        return h+"-"+m+"-"+d+H+":"+M+":"+S; //返回 年-月-日 时:分:秒
    }
    document.getElementById("datetimes").value = today();//将获取到的 年-月-日 时:分:秒 赋给input文本输入框
    document.getElementById("time").value = today();//将获取到的 年-月-日 时:分:秒 赋给input文本输入框
</script>
<script>
    let $=layui.$
    $.get("/property/plot/show")
        .then(({data})=>{
            console.log(data);
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.plotname+"</option>");
                $("[name=plotid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#noticeTable",
            url:"/owner/notice/all",
            toolbar: "#headTool",
            page:true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {field:'noticetitle',align: 'center',title:"通知标题"},
                {field:'noticetext',align: 'center',title:"内容"},
                {field:'noticeimg',align: 'center',title:"图片",templet(d){
                        return  d.noticeimg==null?"-":"<img src='/"+d.noticeimg+"' width='50px'/>";
                    }},
                {field:'notice',align: 'center',title:"是否发布",templet(d) {
                        return d.notice==0?"草稿":"已发出";
                    }},
                {field:'createtime',align: 'center',title:"创建时间"},
                {field:'plotid',align: 'center',title:"所属小区",templet(d) {
                        return d.plot=null?"-":d.plot.plotname;
                    }},
                {title: "操作", templet(d) {
                        if(d.notice==0){
                            return"<a class='layui-btn layui-btn-xs' lay-event='uploads'>编辑</a> <a class='layui-btn layui-btn-xs layui-btn-danger' lay-event='delete'>删除</a>"
                        }else if(d.notice==1){
                            return "<a class='layui-btn layui-btn-xs layui-btn-danger' lay-event='delete'>删除</a>"
                        }
                    }}
            ]]
        })
        table.on("tool(noticeTables)",function (obj){
            if(obj.event == "delete"){
                deletes(obj.data.id);
            }else if(obj.event == "uploads"){
                uploads(obj);
            }
        })
    })
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{
            page: {
                curr:1
            },
            where:where
        });
    }
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{where});
    }
   /* //点击添加
    function add(){
        layui.layer.open({
            type : 1,
            title : "提示",
            area:["500px","400px"],
            content: $("#add"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addForm = layui.form.val("addForm");
                console.log(addForm);
                //发送ajax请求
                $.post("/park/addpark",addForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }*/
</script>
</body>
<script>
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/owner/uploads', // 实际使用时改成您自己的上传接口即可。
            field : "attach",//文件域的名称 <input type='file' name='attach'/>
            accept : "images",
            multiple: true,
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                $("[name=noticeimg]").val(res.data.attachPath)
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
/*    layui.upload.render({
        elem : "#attachImg",
        url : "/owner/uploads",
        field : "attach",//文件域的名称 <input type='file' name='attach'/>
        accept : "images",
        done(res, index, upload){
            //从res中获取
            var attachPath = res.data.attachPath;
            $("[name=attachPath]").val(attachPath);
        }
    });*/
    //文件上传
    function uploads(obj){
        //数据回显，将证件描述和用户名回显
        layui.form.val("upload",obj.data);
        //弹出隐藏的窗口
        layui.layer.open({
            type : 1,
            title : "文件上传",
            content : $("#upload"),
            area :["500px","400px"],
            btn : ["确定","取消"],
            yes(){
                //1.获取文本框中输入的内容
                let params = layui.form.val("upload");
                $.post("/owner/updatePath",params) .then(({msg})=>{
                    layui.layer.closeAll();
                    layui.layer.msg(msg);
                    layui.table.reload("one");
                })
            }
        })
    }
    //点击删除
    function deletes(id){
        layui.layer.open({
            type:0,
            icon:3,
            area:["250px","200px"],
            title:"提示",
            content:"确定删除吗？",
            btn:["确定","取消"],
            yes(){
                $.get("/owner/delete?id="+id)
                    .then(({msg})=>{
                        layui.layer.close()
                        layui.layer.msg(msg);
                        layui.table.reload('one')
                    })

            }

        })
    }

</script>




<script>
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn1',
            url: '/owner/uploads', // 实际使用时改成您自己的上传接口即可。
            field : "attach",//文件域的名称 <input type='file' name='attach'/>
            accept : "images",
            multiple: true,
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img1').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                console.log(res.data)
                $("[name=noticeimg]").val(res.data.attachPath)
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text1').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
    /*    layui.upload.render({
            elem : "#attachImg",
            url : "/owner/uploads",
            field : "attach",//文件域的名称 <input type='file' name='attach'/>
            accept : "images",
            done(res, index, upload){
                //从res中获取
                var attachPath = res.data.attachPath;
                $("[name=attachPath]").val(attachPath);
            }
        });*/
    //文件上传
    function add(){
        //弹出隐藏的窗口
        layui.layer.open({
            type : 1,
            title : "文件上传",
            content : $("#add"),
            area:["500px","400px"],
            btn : ["确定","取消"],
            yes(){
                //1.获取文本框中输入的内容
                let params = layui.form.val("addForm");
                console.log(params);
                $.post("/owner/addnotice",params) .then(({msg})=>{
                    layui.layer.closeAll();
                    layui.layer.msg(msg);
                    layui.table.reload("one");
                })
            }
        })
    }


</script>
</html>
